<template>
    <div class="home">
      <homeHeader></homeHeader>
      <homeswiper :swiperlist="swiperlist"></homeswiper>
      <homeicons :iconslist="iconslist"></homeicons>
        <homelocation></homelocation>
        <homeactivity></homeactivity>
        <homehot :hotlist="hotlist"></homehot>
        <homelike :likelist="likelist"></homelike>
        <homevacation></homevacation>
    </div>
</template>
<style>
.home{
  background:#f5f5f5;
}
</style>
<script>
import homeHeader from './pages/Header'
import homeswiper from './pages/swiper.vue'
import homeicons from './pages/icons.vue'
import homelocation from './pages/location.vue'
import homeactivity from './pages/activity.vue'
import homehot from './pages/hot.vue'
import homelike from './pages/like.vue'
import homevacation from './pages/vacation.vue'

import {mapState} from 'vuex'


export default {
   components:{
       homeHeader,
       homeswiper,
       homeicons,
       homelocation,
       homeactivity,
       homehot,
       homelike,
       homevacation,
       changecity:''
   },
   data(){
     return{
       swiperlist:[],
       iconslist:[],
       hotlist:[],
       likelist:[]


     }
   },
   computed:{
     ...mapState(['city'])

   },
   methods:{
    gethttp(){
       this.$http.get("/api/mock/datahome.json").then((res) => {
       let data=res.data.data;
       data.forEach((item,index) => {
         if(item.city==this.city){
           data=data[index];


         }
         
       });
       console.log(data);





       this.swiperlist=data.swiperlist;
       //console.log(this.swiperlist);
       this.iconslist=data.iconslist;

       this.hotlist=data.hotlist;

       this.likelist=data.likelist;



        
     }).catch((err) => {
       
     });
    }

   },mounted(){
     this.changecity=this.city
     this.gethttp();
   },
   activated(){ 
     if(this.changecity!=this.city){
       this.gethttp();
       this.changecity=this.city;


     }

   }
   
}
</script>